<template>
	<view class="uni-seach">
		<!-- 定位 -->
		<view class="uni-load" v-if="isLoad">
			<view v-if="!loadText" class="uni-loading"></view>
			<view v-else>{{loadText}}</view>
		</view>
		<!-- 跳转模式 -->
		<view class="uni-seach-form" v-if="seachUrl">
			<view class="input placeholder-color" :placeholder="placeholder"></view>
		</view>
		<!-- 输入模式 -->
		<view class="uni-seach-form" :class="isFocus?'active':''" v-else>
			<!-- 搜索筛选-->
			<input type="text" class="input" :confirm-type="confirmType" :placeholder="placeholder" :value="value" @focus="bindFocus" @blur="bindBlur" @input="bindInput" @confirm="bindSubmit" />
			<view class="seach-submit" @click="bindSubmit">{{submit}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uni-seach",
		props:{
			confirmType:{
				type:[Number,String],
				default:'done'
			},
			placeholder:{
				type:[String,Object],
				default:'请输入搜索内容'
			},
			isLoad:{
				type:[Boolean],
				default:false
			},
			seachUrl:{
				type:[String],
				default:''
			},
			loadText:{
				type:[String,Object],
				default:''
			},
		},
		data() {
			return {
				seach:'',
				submit:'搜索',
				isFocus:false,
				value:''
			};
		},
		methods:{
			bindFocus:function(e){
				this.isFocus = true;
			},
			bindBlur:function(e){
				this.isFocus = false
			},
			bindInput:function(e){
				this.value = e.detail.value ;
			},
			bindSubmit:function(){
				let _this = this;
				let value = _this.value;
				uni.$emit('seachComfirm',{value:value})
			}
		}
	}
</script>

<style lang="scss">
	.uni-seach{
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 20rpx;
		box-sizing: border-box;
		background: #efefef;
		.uni-load{
			font-size: $uni-font-24;
			color: $uni-text-color;
			padding-right: 20rpx;
			box-sizing: border-box;
		}
		.uni-seach-form{
			width: 100%;
			height: 100%;
			font-size: $uni-font-24;
			color: $uni-text-color;
			position: relative;
			transition: padding-right 0.1s;
			&.active{
				padding-right: 120rpx;
				.seach-submit{
					right: 0;
				}
			}
			.input{
				width: 100%;
				height: 100%;
				background: #FFFFFF;
				border-radius: 4rpx;
				font-size: $uni-font-24;
				color: $uni-text-color;
				padding: 0 20rpx;
				box-sizing: border-box;
				.placeholder-color{
					
				}
			}
			.seach-submit{
				width: 100rpx;
				height: 100%;
				border-radius: 4rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $uni-text-color-inverse;
				background: $uni-color-primary;
				font-size: $uni-font-24;
				position: absolute;
				right: -100%;
				top: 0;
				transition: right 0.1s;
			}
		}
	}
</style>
